<template>
  <div class="app-container">
    <div class="page-header">
      <el-button
        class="back-button"
        type="primary"
        icon="el-icon-back"
        @click="$router.push('/main/xingzheng/sblvlibiao/sblvlibiao')"
        >返回</el-button
      >
    <h2>机器设备履历卡列表</h2>
    </div>
    <!-- 搜索区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item label="机器名称">
          <el-input
            v-model="listQuery.machineName"
            placeholder="请输入机器名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="编号/卡号">
          <el-input
            v-model="listQuery.cardNumber"
            placeholder="请输入编号/卡号"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleFilter"
            >查询</el-button
          >
          <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
            >新增</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            :disabled="!selectedIds.length"
            @click="handleBatchDelete"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号/卡号" prop="cardNumber" min-width="120" />
      <el-table-column label="机器名称" prop="machineName" min-width="120" />
      <el-table-column
        label="规格型号"
        prop="specificationModel"
        min-width="120"
      />
      <el-table-column
        label="机器序号"
        prop="machineSerialNumber"
        min-width="120"
      />
      <el-table-column label="购入日期" min-width="100">
        <template slot-scope="{ row }">
          {{ formatDate(row.purchaseDate) }}
        </template>
      </el-table-column>
      <el-table-column label="保固期限" prop="warrantyPeriod" min-width="100" />
      <el-table-column label="制造商" prop="manufacturerName" min-width="120" />
      <el-table-column label="购入价格" prop="purchasePrice" min-width="100">
        <template slot-scope="{ row }">
          {{ row.purchasePrice ? "¥" + row.purchasePrice : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="200"
        fixed="right"
      >
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="handleView(row)"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="handleUpdate(row)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="handleDelete(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  getMachineList,
  deleteMachine,
  deleteMachineBatch,
} from "@/api/machine";
import Pagination from "@/components/Pagination";

export default {
  name: "SblvlibiaoList",
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        current: 1,
        size: 10,
        machineName: "",
        cardNumber: "",
      },
      selectedIds: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    formatDate(date) {
      if (!date) return "-";
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    async getList() {
      this.listLoading = true;
      try {
        const response = await getMachineList(this.listQuery);
        this.list = response.data.records;
        this.total = response.data.total;
      } catch (error) {
        console.error("获取列表失败:", error);
        this.$message.error("获取列表失败");
      }
      this.listLoading = false;
    },
    handleFilter() {
      this.listQuery.current = 1;
      this.getList();
    },
    handleSelectionChange(val) {
      this.selectedIds = val.map((item) => item.id);
    },
    handleCreate() {
      // 跳转到新增页面
      this.$router.push({
        path: "/main/xingzheng/sblvlibiao/sblvlibiao",
        query: { type: "add" },
      });
    },
    handleView(row) {
      // 跳转到详情页面
      this.$router.push({
        path: "/main/xingzheng/sblvlibiao/sblvlibiao",
        query: {
          id: row.id,
          type: "view",
        },
      });
    },
    handleUpdate(row) {
      // 跳转到编辑页面
      this.$router.push({
        path: "/main/xingzheng/sblvlibiao/sblvlibiao",
        query: {
          id: row.id,
          type: "edit",
        },
      });
    },
    async handleDelete(row) {
      try {
        await this.$confirm("确认删除该记录?", "提示", {
          type: "warning",
        });
        await deleteMachine(row.id);
        this.$message.success("删除成功");
        this.getList();
      } catch (error) {
        console.error("删除失败:", error);
        if (error !== "cancel") {
          this.$message.error("删除失败");
        }
      }
    },
    async handleBatchDelete() {
      try {
        await this.$confirm(
          `确认删除选中的 ${this.selectedIds.length} 条记录?`,
          "提示",
          {
            type: "warning",
          }
        );
        await deleteMachineBatch(this.selectedIds);
        this.$message.success("批量删除成功");
        this.getList();
      } catch (error) {
        console.error("批量删除失败:", error);
        if (error !== "cancel") {
          this.$message.error("批量删除失败");
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - 40px);
}

.filter-container {
  padding-bottom: 10px;
  .el-form-item {
    margin-bottom: 10px;
  }
}

.pagination-container {
  margin-top: 20px;
}

.el-button + .el-button {
  margin-left: 10px;
}
.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  padding: 20px;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  h2 {
    font-size: 24px;
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #409eff, #67c23a);
      border-radius: 3px;
    }
  }
}

.back-button {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
</style> 